import './assets/main.css'
import { createApp, onMounted, ref, reactive } from "vue";
import App from './App.vue'
import router from './router'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import pinia from "@/stores/index";
// 注册指令
import plugins from '@/plugins'
// import { download } from '@/utils/request'
// 路由拦截
import './router/permission.js'
// 全局加载element图标
import elementIcons from '@/components/SvgIcon/svgicon'
const app = createApp(App)
// 创建响应式变量
const windowWidth = ref(window.innerWidth)
const isMobile = ref(false)
const elementSize = ref('default')
// 更新窗口宽度的函数,并判断是否是手机端
const updateWindowWidth = () => {
    windowWidth.value = window.innerWidth;
    if (windowWidth.value <= 768) {
      isMobile.value = true
      elementSize.value = 'small'
    } else {
      isMobile.value = false
      elementSize.value = 'default'
    }
};

// 添加事件监听器
window.addEventListener('resize', updateWindowWidth);
// 刷新执行一次
updateWindowWidth()
// 登录窗口
const loginOpen = ref(false);
// 分页组件
import Pagination from '@/components/Pagination/index.vue'
// 全局方法挂载
app.config.globalProperties.$isMobile = isMobile     //  isMobile 是否是手机端
app.config.globalProperties.$windowWidth = windowWidth  // 屏幕宽度
app.config.globalProperties.$elementSize = elementSize  // element组件默认大小
// 全局组件挂载
app.component('Pagination', Pagination)

app.use(pinia);
app.use(router);
app.use(plugins);
app.use(elementIcons);
app.use(ElementPlus);
app.mount('#app')
